import React, { Component } from "react"
import { Menu } from "antd"
import { withRouter } from "react-router-dom";
import { connect } from "react-redux"
import navDate from '@/assets/utils/leftNav'
import { indexObjectArr, deepCopy } from '@/assets/utils/utils'

import { historyChangeindex, historyChangeNav } from "@/action/index"
const mapStateToProps = (store, props) => {
    return {
        ...store
    }
}
const mapDispatchToProps = (dispatch, props) => {
    return {
        changeHistoryFn(history_nav, history_index) {
            historyChangeNav(history_nav)(dispatch)
            historyChangeindex(history_index)(dispatch)
        },
        setHistoryIndexFn(history_index) {
            historyChangeindex(history_index)(dispatch)
        }
    }
}

class LeftSider extends Component {
    constructor(props) {
        super(props)
        let pathname = props.location.pathname, openKeys = "base";
        let pathnameObject = this.getLeftNavVal(pathname);
        if (!pathnameObject.path) {
            pathname = "/base/subject";
            pathnameObject = deepCopy(this.getLeftNavVal(pathname));
        }
        let history_nav = deepCopy(this.props.history_nav);
        let j = indexObjectArr(history_nav, pathname, 'path');
        if (j == -1) { history_nav.push(pathnameObject) }
        this.props.changeHistoryFn(history_nav, pathnameObject);
        this.state = {
            inlineCollapsed: true,
            selectedKeys: pathname,
            openKeys: ["base"]
        }

    }

    componentWillReceiveProps(nextProps) {
        let pathname = nextProps.location.pathname
        if (pathname !== this.props.location.pathname) {
            let j = indexObjectArr(this.props.history_nav, pathname, 'path');
            this.setState({ selectedKeys: pathname });
            let prams = deepCopy(this.getLeftNavVal(pathname));
            if (j == -1) {
                let history_nav = deepCopy(this.props.history_nav)
                history_nav.push(prams)
                this.props.changeHistoryFn(history_nav, prams)
            } else {
                this.props.setHistoryIndexFn(prams)
            }
        }
    }
    getLeftNavVal(pathname) {
        for (let i = 0, m = navDate.length; i < m; i++) {
            if (navDate[i].children && navDate[i].children.length) {
                for (let j = 0, jm = navDate[i].children.length; j < jm; j++) {
                    if (navDate[i].children[j].path == pathname) {
                        return deepCopy(navDate[i].children[j])
                    }
                }
            }
            if (navDate[i].path == pathname) {
                return deepCopy(navDate[i])
            }
        }
        return {}
    }
    muneItemFn = (res) => {
        this.setState({ selectedKeys: res.key })
        this.props.history.push(res.key)
    }
    onOpenChange = (key, arr) => {
        this.setState({ selectedKeys: "", openKeys: [key[key.length - 1] || ''] })
    }
    render() {
        const menuFn = res => {
            if (res.children) {
                return (
                    <Menu.SubMenu title={res.title} icon="" key={res.path}>
                        {res.children.map(item => menuFn(item))}
                    </Menu.SubMenu>
                )
            } else {
                return (
                    <Menu.Item key={res.path}>
                        {res.title}
                    </Menu.Item>
                )
            }
        }
        return (
            <>
                <Menu mode="inline" onOpenChange={this.onOpenChange} onClick={this.muneItemFn} selectedKeys={this.state.selectedKeys} openKeys={this.state.openKeys}>
                    {navDate.map(res => { return menuFn(res) })}
                </Menu >
            </>

        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(LeftSider));